import React, {useState} from "react";
import {debounce} from 'lodash';
import './index.css'
import {CopyOutlined} from "@ant-design/icons";
import {LOGIN_MENU, LOGIN_MENU_MAP, resizeWidth} from "@/pages/login/common";

const Index: React.FC<any> = () => {

  console.log('%c%s', 'color: blue;', '[platform-front] Login');

  const [critical, setCritical] = useState(false);
  const [selectedKey, setSelectedKey] = useState('login');

  React.useEffect(() => {
    if (window.innerWidth < resizeWidth) {
      console.log('%c%s', 'color: blue;', '[platform-front] window.innerWidth < resizeWidth');
      setCritical(true);
    }
  }, [critical]);

  React.useEffect(() => {
    window.addEventListener('resize', handleResize); //监听窗口大小改变
    return () => window.removeEventListener('resize', debounce(handleResize, 500));
  }, []);

  const handleResize = (e: any) => {
    if (e.target.innerWidth < resizeWidth) {
      console.log('%c%s', 'color: blue;', '[platform-front] window.innerWidth < resizeWidth');
      setCritical(true);
    } else {
      setCritical(false);
    }
  }

  const renderHeader = () => {
    return (
      <>
        {
          critical ?
            <div className='login-box-form-center-header-left'>
              <div className='login-box-form-center-header-left-log'/>
              ElasticSearch Manager
            </div>
            :
            <div>null</div>
        }
        <div className='login-box-form-center-header-right'>
          <CopyOutlined/>
          说明文档
        </div>
      </>
    )
  }

  const renderContent = () => {
    const menuItem = LOGIN_MENU_MAP.get(selectedKey) || LOGIN_MENU_MAP.get(LOGIN_MENU[0].key);
    if (menuItem && menuItem.render) {
      return menuItem.render(handleMenuClick);
    }
    return null
  }

  const handleMenuClick = (e: string) => {
    setSelectedKey(e);
  }

  return (
    <div className='login-box'>
      <div className='login-box-left' style={{display: critical ? 'none' : undefined}}>
        <div className='login-box-left-img'/>
        <div className='login-box-left-title'>LogiEM</div>
        <div className='login-box-left-conter'>一站式 Elasticsearch</div>
        <div className='login-box-left-conter'>集群指标监控与运维管控平台</div>
      </div>
      <div className='login-box-form'>
        <div className='login-box-form-center'>
          <div className='login-box-form-center-header'>
            {renderHeader()}
          </div>
          <div className='login-box-form-center-title' style={selectedKey === 'login' ? {marginTop: '5%'} : undefined}>
            <div className='login-box-form-center-title-left'>
              {
                selectedKey === 'login' ? '登录' : '账号注册'
              }
            </div>
            <div className='login-box-form-center-title-right'>
              {
                selectedKey === 'login' ?
                  <div> 还没账号，<a onClick={() => handleMenuClick('register')}>立即注册</a></div> :
                  <div>已有账号，<a onClick={() => handleMenuClick('login')}>直接登录</a></div>
              }
            </div>
          </div>
          <div className="login-box-form-center-content">
            {renderContent()}
          </div>
          <div className="login-box-form-center-bottom">
            <p>地址地址地址地址地址 邮编：101010 </p>
            <p>电话：00-10-0001212 传真：00-10-00011223 Email：esyunwei@epri.sgcc.com.cn</p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index;
